<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <title>垂直表单</title>
    <!-- 垂直表单：默认情况下表单控件是块元素，会占用一整行，所有的表单控件会垂直堆叠，所以叫垂直表单 -->
</head>
<body>
    <!-- action用于指定当前表单要提交给谁，一般是一个服务器的URL -->
    <!-- method指定提交方式，一般有get和post两种方式 -->
    <!-- get:提交数据会拼接在URL后面，有数据量的限制，不能提交文件 -->
    <!-- post:会隐藏参数，比较安全，可以提交文件 -->
    <form action="longin.jsp" method="post">
        <!-- form-group可以明确语义，添加一些边距，让表格更紧凑 -->
        <div class="form-group">
            <!-- lable用于显示一些文字，for属性用于指定关联的表单元素 -->
            <label for="username">用户名</label>
            <!-- input用于创建一个表单元素，元素的类型根据type来决定，text用于创建文本输入框 -->
            <!-- name:用来指定当前表单提交时参数的名字 -->
            <!-- placeholder用于在表单元素内显示一些提示文字 -->
            <!-- required设置这个表单元素为必填 -->
            <!-- form-control表单控件，让表单元素应用bootstrap的样式 -->
            <input type="text" class="form-control" name="username" id="username" placeholder="邮箱或手机号" required>
        </div>
        <div class="form-group">
            <label for="">密码</label>
            <input type="password" class="form-control" name="password" id="password" placeholder="请输入密码" required>
        </div>
        <!-- 多选框加文字 -->
        <div class="checkbox">
            <label> 
                <input type="checkbox">
                记住我
            </label>
        </div>
        <input type="submit" class="btn btn-primary" value="登录">
    </form>
    
    
</body>
</html>